<!--
 * @Author: Liu
 * @Date: 2023-05-08 10:51:41
 * @LastEditTime: 2023-05-19 20:40:23
-->

<!--规则 -->
<template>
  <div class="rule-box" v-show="props.isShow">
    <div :class="['rule-inner', 'dialog-inner', props.isShow && 'scale-in-center']">
        <!-- <img src="../../public/images/close.png" alt="" class="close-icon" @click="$emit('handleClose')"> -->
        <!-- <img src="/public/images/rule_box.png" alt="" class="rule_box_data"> -->
        <div class="title">活动规则</div>
        <div class="rule_content">
            <p>
                <b>1、活动时间：</b>10月28日到11月2日
            </p>
            <p>
                <b>2、活动对象：</b>智电iDD粉丝社群
            </p>
            <!-- <p>
                <b>3、活动规则：</b>活动期间，车主每日5次投掷骰子机会，根据投掷骰子得出点数，在棋盘格图上移动相应步数，在停留站点有机会触发奖励事件。
            </p> -->
            <!-- <p>
                1.活动期间，车主每日可参与幸运 U 行棋游戏，共五次投掷骰子机会，通过投掷骰子得出点数，在无边界棋盘格图上移动相应步数，在停留站点有机会触发奖励事件;
            </p>
            <p>
                2.棋子停留时，棋盘将随机出现以下奖励事件：<br />
                U 形充能站：获得1-100随机 U 乐值，U 乐值将纳入周度排行，排行TOP100用户会获得额外奖励；<br />
                U 币补给站：获得5-200随机 U 币面额；
                幸运盲盒站：获得对应实体奖励；
                好运加一站：获得额外1次投掷机会。
            </p> -->
            <p>
                <b>3、活动玩法：</b>
            </p>
            <!-- <p>
                ◆日日有奖：
            </p> -->
            <p>
                在游戏过程中比拼运气，掷骰子获得智电iDD行走步数来完成指定任务，部分停留站随机获得奖励。
            </p>
            <!-- <p>
                ◆榜单大奖：
            </p>
            <p>
                活动期间，车主每日参与获取U星能，抢占周度U星能排行榜，排行TOP500获得额外奖励，奖励设置如下：
            </p> -->
            <!-- <p style="margin: 5px 0;">
                <img src="https://yinli-qixi-run.varwey.com/2023_ca/u_chess/images/rule-table.png" alt="" />
            </p>
            <p style="font-size: 12px;">注：U星能周度排行榜单将于9月4日0点自动锁定，榜单奖励可于我的奖品页面查看。</p> -->
            <p>
                <b>4、活动内容：</b>
            </p>
            <p>
                跟着UNI智电iDD一起到云南秘境寻秋吧！用户进入游戏选择UNI-V/K车型，通过点击骰子获得所选汽车行走的步数，走完个字即到达终点，先到先得，一人一天两次免费投骰子的机会，邀请2名新用户好友（非加入过智电iDD其他社群的新用户）可再获得一次投骰子机会。<br />
                在汽车行走过程中，会随机触发以下奖励事件：<br />
                ①U币盲盒：获得随机面额U币（随机获得10-200U币，共计发放100wU币，先到先得）<br />
                ②好运补给卡：获得额外一次投掷机会<br />
                ③智电积分：获得1-100随机智电积分，活动结束后可凭积分排行榜获得额外奖励。
            </p>
            <p>
                实物奖励将以代金券形式在活动结束后7个工作日内完成发放，需在有效期内及时兑换，逾期作废视为放弃；<br />
                U币奖励将在活动结束后7个工作日内完成发放，可前往【我的U币】查看U币到账情况；<br />
            </p>
            <p>
                <b>5、榜单大奖： </b>
                活动期间，用户每日参与获取智电积分，抢占活动【智电积分榜】，排行TOP30获得额外奖励，奖励设置如下：<br />
                智电积分排名-奖励：<br />
                1-5名：300元文化宣传品<br />
                6-15名：奶茶券<br />
                16-30名：200U币<br />
                *【智电积分榜】将于11月3日0点自动锁定，榜单奖励可于我的奖品页面查看。
            </p>
            <!-- <p>
                1.代金券需及时领取和兑换，代金券发放后超过兑换期限未兑换,则视为自动放弃该奖品:<br />
                2.实物奖品具体发货时间以 UNI 商城时间为准; 如果中奖用户收到的奖品出现质量问题( 非质量问题不退换 )，可及时与小 U 沟通反馈，官方将为您妥善解决。
            </p> -->
            <!-- <p>
                <b>6、活动说明：</b>活动期间，若用户出现违规行为（如利用黑客工具、软件作弊等），引力域有权取消用户参与资格并收回已发放奖品。
            </p> -->
        </div>
        <div class="footer">
            <div><div class="btn" role="button" @click="$emit('handleClose')">确&nbsp;&nbsp;认</div></div>
        </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
	isShow:{
		type:Boolean,//类型字符串
		default:false//如果没有传递msg参数,默认值是这个
	},
})


</script>
<style  scoped>
.rule-box{
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.rule-inner{
    width: 643px;
    height: 923px;
    position: relative;
    border-radius: 30px;

}
.rule_box_data{
    width: 100%;
    height: 100%;
}
.close-icon{
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-130%);
    width: 52px;
    height: 52px;
}
.rule_content{
    position: absolute;
    width: 530px;
    height: 780px;
    top: -5%;
    left: 10%;
    bottom: 0;
    right: 0;
    /* margin: auto; */
    overflow-y: scroll;
    color: #0160a5;
    font-family: "ChangAnunitype-Regular";
    font-size: 26px;
    padding-right: 20px;
    margin-top: 140px;
    /* margin-bottom: 20px; */
}

.rule_content b {
    font-family: "ChangAnunitype-Bold";
}

.footer > div {
    width: 255px;
    height: 64px;
    margin-bottom: 25px;
    box-shadow: 7px 10px 35px rgba(23, 105, 175, .57);
    border-radius: 50px;
}

/* .rule_content::-webkit-scrollbar {
    width: 10px;
}
.rule_content::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #d55959;
}
.rule_content::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
} */

</style>